<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title></title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="description" content="%description%" />
	<meta name="keywords" content="" />
	<meta name="author" content="ComponentOne" />
	<link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
	<script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
	<script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
	<script src="../../external/globalize.min.js" type="text/javascript"></script>
	<script src="../../external/raphael-min.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.raphael.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijchartcore.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijbubblechart.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready(function () {
			var data2010 = [{
				label: "China",
				legendEntry: true,
				data: { y: [73], x: [7931], y1: [1340] }
			}, {
				label: "India",
				legendEntry: true,
				data: { y: [65], x: [2972], y1: [1150] }
			}, {
				label: "USA",
				legendEntry: true,
				data: { y: [78], x: [42066], y1: [309] }
			}, {
				label: "Japan",
				legendEntry: true,
				data: { y: [83], x: [30866], y1: [126] }
			}, {
				label: "Russia",
				legendEntry: true,
				data: { y: [69], x: [14318], y1: [140] }
			}, {
				label: "Congo",
				legendEntry: true,
				data: { y: [48], x: [374], y1: [72] }
			}, {
				label: "South Africa",
				legendEntry: true,
				data: { y: [52], x: [9284], y1: [43] }
			}, {
				label: "Mexico",
				legendEntry: true,
				data: { y: [77], x: [11754], y1: [112] }
			}, {
				label: "UK",
				legendEntry: true,
				data: { y: [80], x: [31217], y1: [61] }
			}];

			var data1910 = [{
				label: "China",
				legendEntry: true,
				data: { y: [32], x: [810], y1: [423] }
			}, {
				label: "India",
				legendEntry: true,
				data: { y: [23], x: [692], y1: [249] }
			}, {
				label: "USA",
				legendEntry: true,
				data: { y: [52], x: [7914], y1: [93] }
			}, {
				label: "Japan",
				legendEntry: true,
				data: { y: [40], x: [1883], y1: [50] }
			}, {
				label: "Russia",
				legendEntry: true,
				data: { y: [36], x: [1842], y1: [80] }
			}, {
				label: "Congo",
				legendEntry: true,
				data: { y: [32], x: [602], y1: [11] }
			}, {
				label: "South Africa",
				legendEntry: true,
				data: { y: [34], x: [2864], y1: [5.9] }
			}, {
				label: "Mexico",
				legendEntry: true,
				data: { y: [27], x: [2102], y1: [15] }
			}, {
				label: "UK",
				legendEntry: true,
				data: { y: [54], x: [6489], y1: [42] }
			}];

			$("#wijbubblechart").wijbubblechart({
				showChartLabels: false,
				axis: {
					y: {
						text: "Life Expectancy",
						autoMin: false,
						autoMax: false,
						min: 0,
						max: 100
					},
					x: {
						text: "Income",
						autoMin: false,
						autoMax: false,
						min: 0,
						max: 45000
					}
				},
				hint: {
					content: function () {
						return "" + this.data.label + " \nLife Expectency: " + this.y + " \nIncome: " + Globalize.format(this.x, "n") + " \nPopulation: " + this.data.y1 + "M";
					}
				},
				header: {
					text: "Wealth & Health of Nations - 2010"
				},
				seriesList: data2010
			});


			$("#Btn1910").click(function () {
				$("#wijbubblechart")
					.wijbubblechart("option", "header", { text: "Wealth & Health of Nations - 1910" })
					.wijbubblechart("option", "seriesList", data1910);

			});
			$("#Btn2010").click(function () {
				$("#wijbubblechart")
					.wijbubblechart("option", "header", { text: "Wealth & Health of Nations - 2010" })
					.wijbubblechart("option", "seriesList", data2010);

			});
		});
	</script>
</head>
<body class="demo-single">
	<div class="container">
		<div class="header">
			<h2>
				Overview</h2>
		</div>
		<div class="main demo">
			<!-- Begin demo markup -->
			<div id="wijbubblechart" class="ui-widget ui-widget-content ui-corner-all" style="width: 756px; height: 475px;">
			</div>
			<div class="togbuttons">
				<button id="Btn1910">
					1910</button>
				<button id="Btn2010">
					2010</button>
			</div>
			<!-- End demo markup -->
			<div class="demo-options">
				<!-- Begin options markup -->
				<!-- End options markup -->
			</div>
		</div>
		<div class="footer demo-description">
			   <p>This sample uses the <b>symbol</b> option to apply custom images for each bubble series.</p>
		</div>
	</div>
</body>
</html>
